import React from 'react'
import { Actions, NameSpace } from "../../model/taskModel";
import { connect } from "react-redux";
import styles from "../../css/task.module.css";
import Config from "../../Config";
import { Debt } from "../../const/imgs";
import { locationTo } from '../../utils/LocationUtil';
import * as locations from '../../const/locations'
import { getInfo } from '../../utils/StorageUtil';
class CaseInfo extends React.Component {
 
  componentDidMount() {
    document.title = '案件信息'
  }
  render() {
    const case_info = this.props.TaskData?this.props.TaskData.case_info:getInfo('TaskInfo').case_info
    const {
      // case_id,
      commision_case_no, // 案件号
      start_time, // 案件开始时间
      expired_time, // 截止日期
      commission_name, // 委托方名称
      commision_batch_no,  // 批次号
      commission_start_date,  // 委托开始时间
      commission_end_date,  // 委托结束时间
      current_collect_hands,      

    } =case_info
    return (
      <div className={styles['home']} style={{ paddingTop:'10px' }} >
        <div className={styles['debt_item']} style={{ color: Config.fontColor }} >

          <div className={styles['debt_method']} style={{ marginBottom: '10px' }} >
            <CaseItem name='委托方' value={commission_name} />
            <CaseItem name='批次号' value={commision_case_no} />
            <CaseItem name='案件编号' value={commision_batch_no} />
          </div>
          <div className={styles['debt_method']} style={{ marginBottom: '10px' }}>
            <CaseItem name='开始时间' value={start_time} />
            <CaseItem name='结束时间' value={expired_time} />
          </div>
          <div className={styles['debt_method']} style={{ marginBottom: '10px' }}>
          <CaseItem name='委托开始时间' value={commission_start_date} />
            <CaseItem name='委托截止时间' value={commission_end_date} />
          </div>
          <div className={styles['debt_method']}>
            <CaseItem 
            name='手别'  
            value={current_collect_hands} 
            isNext={true} 
            navigate={()=>{locationTo(locations.HANDS)}}
            />
          </div>
        </div>
      </div>
    )
  }
}

const CaseItem = ({ name, value, isNext,navigate }) => {
  return (

    <div className={styles['debt_data_method']}>
      <span className={styles['debt_value']}> {name}     </span>
      <span 
      className={styles['debt_key']}
      onClick={navigate}
      > {value}
            {isNext &&

          <img src={Debt.YJT} style={{ width: '7px', marginLeft: '5px' }} alt='' />

        }
      </span>
    </div>
  )
}

const mapStateToProps = state => {
  return {
    ...state[NameSpace]
  };
};
const mapDispatchToProps = dispatch => {
  return {
    taskTab(item) {
      let params = {
        taskTabIndex: item.taskTabIndex
      };
      dispatch(Actions.actionTaskTab(params));
    }
  };
};

export default connect(mapStateToProps, mapDispatchToProps)(CaseInfo);